<template>
  <section
    v-if="visible"
    class="absolute top-0 left-0 flex gap-x-4 px-4 rounded-2xl bg-[#3a3c3e] text-white z-10"
    :style="{
      transform: `translate(${props.x}px, ${props.y}px)`,
    }"
    ref="funRef"
  >
    <article
      v-for="fn in functions"
      :key="fn.type"
      class="py-4 px-1 cursor-pointer hover:bg-[#2e2f31]"
      @click="emitFunctionName(fn.type)"
    >
      {{ fn.chName }}
    </article>
  </section>
</template>
<script lang="ts" setup>
import { ArticleStylesKeys } from "@/store/modules/types";

const visible = ref(false);
const funRef = useTemplateRef("funRef");
const props = withDefaults(
  defineProps<{
    x: number;
    y: number;
  }>(),
  {
    x: 0,
    y: 0,
  }
);
const emits = defineEmits(["getHoverBarType"]);
const functions: {
  enName: ArticleStylesKeys;
  chName: string;
  type: ArticleStylesKeys;
}[] = [
  {
    enName: "note",
    chName: "批注",
    type: "note",
  },
  {
    enName: "bold",
    chName: "加粗",
    type: "bold",
  },
  {
    enName: "deleteLine",
    chName: "删除线",
    type: "deleteLine",
  },
  {
    enName: "underLine",
    chName: "下划线",
    type: "underLine",
  },
];

function emitFunctionName(fnName: string) {
  emits("getHoverBarType", fnName);
}

function openHoverBar() {
  visible.value = true;
}

function closeHoverBar() {
  visible.value = false;
}

function getVisible() {
  return visible.value;
}

defineExpose({
  instance: funRef,
  openHoverBar,
  closeHoverBar,
  getVisible,
});
</script>
<style lang="scss" scoped></style>
